<template>
    <el-card>
        <div slot="header">{{project.name}} 各平台日活跃主播变化趋势 表</div>
        <div>
            分类：
            <el-radio-group v-model="showCategory">
                <el-radio-button v-for="(name,index) in categories"
                                 :key="index"
                                 :value="index"
                                 :label="index">{{name}}
                </el-radio-button>
            </el-radio-group>
            时间：
            <el-date-picker
                    :editable="false"
                    v-model="time"
                    type="daterange"
                    range-separator="至"
                    @change="change"
                    :picker-options="pickerOptions"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
        </div>
        <br>
        <div v-loading="loading">
            <el-table :data="categoriesData[showCategory]" show-summary :summary-method="summary" border>
                <el-table-column label="平台" prop="name" fixed="left"/>
                <template v-for="(day,index) in dateIndex">
                    <el-table-column :label="day">
                        <template slot-scope="scope">
                            {{scope.row.data[index]}}
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <p class="chart" id="chart"></p>
        </div>
    </el-card>
</template>

<script>
    import _ from 'lodash';

    const defaultData = {
        title: {text: '各平台活跃主播变化趋势'},
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {right: '10%', feature: {saveAsImage: {pixelRatio: 2}}},
        grid: {
            top: '30%',
            bottom: '0%',
            containLabel: true
        },
        legend: {top: '8%', right: '20%'},
        yAxis: {},
    };
    let chart;
    export default {
        name: "report_active_anchor",
        props: ['project', 'date'],
        data() {
            return {
                loading: true,
                time: [],
                dateIndex: [],
                categories: [],
                categoriesData: [],
                showCategory: -1,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近7天',
                        onClick(picker) {
                            picker.$emit('pick', [moment().subtract(7, 'day').toDate(), moment().subtract(1, 'day').toDate()]);
                        }
                    }, {
                        text: '最近15天',
                        onClick(picker) {
                            picker.$emit('pick', [moment().subtract(15, 'day').toDate(), moment().subtract(1, 'day').toDate()]);
                        }
                    }, {
                        text: '最近30天',
                        onClick(picker) {
                            picker.$emit('pick', [moment().subtract(30, 'day').toDate(), moment().subtract(1, 'day').toDate()]);
                        }
                    }]
                },
            };
        },
        methods: {
            fetch() {
                if (!this.date || this.date.length === 0)
                    return;
                this.dateIndex = [];
                const url = `/api/project/${this.project.id}/report/` + moment(this.time[0]).format('YYYY-MM-DD') + '/'
                    + moment(this.time[1]).format('YYYY-MM-DD');
                this.loading = true;
                this.$http.get(url).then(res => {
                    this.loading = false;
                    this.dateIndex = res.data.date;
                    this.categories = [];
                    this.categoriesData = [];
                    _.each(res.data.data, (data, category) => {
                        this.categories.push(category);

                        this.categoriesData.push(data);
                    });
                    if (this.showCategory === -1)
                        this.showCategory = 0;
                    else
                        this.fillDataToChart(this.showCategory);
                });
            },
            change() {
                if (!this.date)
                    return;
                this.fetch();
            },
            summary({columns, data}) {
                const sums = ['合计'];
                data.forEach(d => {
                    d.data.forEach((d, i) => {
                        if (sums[i + 1])
                            sums[i + 1] += d;
                        else
                            sums[i + 1] = d;
                    });
                });
                return sums;
            },
            fillDataToChart(index) {
                const data = this.categoriesData[index];
                let start = moment(this.time[0]), end = moment(this.time[1]);
                let date;
                if (start.diff(end, 'day') === 0)
                    date = start.format('YYYY-MM-DD');
                else
                    date = '从 ' + start.format('YYYY-MM-DD') + ' 到 ' + end.format('YYYY-MM-DD');

                chart.setOption(_.merge({
                    legend: {data: _.map(data, 'name')},
                    xAxis: {data: this.dateIndex},
                    series: data,
                    toolbox: {feature: {saveAsImage: {name: `${this.project.name} ${date} 各平台活跃主播变化趋势表`}}}
                }, defaultData));
            },
        },
        watch: {
            /*data(val) {
                if (!(val.project.id > 0) || this.date[1] === val.date) return;
                this.project = val.project;
                this.date = [moment(val.date).subtract(6, 'day').toDate(), new Date(val.date)];
                this.$nextTick(() => {
                    this.fetch();
                });
            },*/
            showCategory(val) {
                this.fillDataToChart(val);
            }
        },
        mounted() {
            console.log('report mounted', this.project);
            if (this.project.id > 0) {
                this.time = [moment(this.date).subtract(6, 'day').toDate(), new Date(this.date)];
                this.fetch();
            } else {
                let unwatch = this.$watch('project', val => {
                    this.project = val;
                    this.time = [moment(this.date).subtract(6, 'day').toDate(), new Date(this.date)];
                    this.fetch();
                    unwatch();
                });
            }
            chart = echarts.init(document.querySelector('#chart'));
        }
    }
</script>

<style scoped>
    .chart {
        height: 500px;
    }
</style>